import { memo, useCallback, useRef } from "react";
import React from 'react';
import { Rate, Carousel } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

import { ItemWrapper } from "./style";
import { useNavigate } from "react-router-dom";

export const RoomItem = memo((props) => {
    const { itemData, itemwidth = 25, itemClick } = props;
    const carouselRef = useRef();

    // 轮播图控制函数
    const handleBtnClick = (isNext = true, e) => {
        // 阻止事件冒泡
        e.stopPropagation();
        isNext ? carouselRef.current.next() : carouselRef.current.prev();
    }

    //跳转函数
    const navigate = useNavigate();
    const clickSkip = useCallback((item) => {
        console.log("navigate", itemClick);
        if (itemClick) {
            itemClick();
            navigate('/detail');
        }
    }, [navigate]);


    const sliderElement = <div className="slider">
        {itemData?.picture_urls?.length > 1 && (
            <>
                <div className="btn left" onClick={e => handleBtnClick(false, e)}>
                    <LeftOutlined />
                </div>
                <div className="btn right" onClick={e => handleBtnClick(true, e)}>
                    <RightOutlined />
                </div>
            </>
        )}
        <Carousel

            ref={carouselRef}
            effect="fade"
        >
            {itemData?.picture_urls?.map((item) => {
                return (
                    <div key={item} className="item">
                        <img src={item} alt="房间图片" />
                    </div>
                )
            })}
        </Carousel>
    </div>

    const coverElement = <div className="room-cover">
        <img className="item-picture" src={itemData.picture_url} alt="房间图片" />
    </div>

    return (
        <ItemWrapper verifycolor={itemData?.verify_info?.text_color || "#ccc"} itemwidth={itemwidth}
            onClick={(item) => (clickSkip(item))}
        >
            <div className="inner">
                <div className="top">
                    {itemData.picture_urls ? sliderElement : coverElement}
                    <div className="desc">{itemData?.verify_info?.messages?.join(".")}</div>
                </div>
                <div className="bottom">
                    <div className="name">
                        {itemData.name}
                    </div>
                    <div className="price">
                        ¥{itemData.price}/晚
                    </div>
                    <div className="comment">
                        <Rate
                            value={itemData.star_rating ?? 5}
                            disabled
                            allowHalf
                            precision={1}
                            style={{ fontSize: "12px", color: "#00848a" }}
                        />
                        <div className="desc">
                            <span style={{ fontSize: "12px", margin: "2px" }}>
                                {itemData?.reviews_count}
                            </span>
                            {itemData?.bottom_info?.content ? `·${itemData?.bottom_info?.content}` : ''}
                        </div>
                    </div>
                </div>
            </div>
        </ItemWrapper>
    )
});